<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="${pageContext.request.contextPath}/">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>系统菜单管理</title>

        <link href="resource/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="resource/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
        <link href="resource/admin/css/plugins/jsTree/style.min.css" rel="stylesheet">
        <link href="resource/admin/css/animate.css" rel="stylesheet">
        <link href="resource/admin/css/style.css?v=4.1.0" rel="stylesheet">

    </head>
    <body class="gray-bg">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>系统用户管理</h5>
                        <!--<div class="ibox-tools">
                            <a href="projects.html" class="btn btn-primary btn-xs">创建新项目</a>
                        </div>-->
                        <div style="margin-left: 100px; float: none;text-align: left;display: block">
                            <button type="button" id="menu-add-btn" class="btn btn-success btn-xs"><i class="fa fa-tree"></i> 新建菜单</button>
                            <button type="button" id="menu-edit-btn" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> 编辑菜单</button>
                            <button type="button" id="menu-remove-btn" class="btn btn-danger btn-xs"><i class="fa fa-remove"></i> 删除菜单</button>
                            <button type="button" id="menu-loading-btn" class="btn btn-white btn-xs" onclick="javascript:window.location.reload(true)"><i class="fa fa-refresh"></i></button>
                        </div>

                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="ibox-title">
                                    <h5>JSON示例</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="menu-tree"></div>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <div class="ibox-title">
                                    <h5>JSON示例</h5>
                                </div>
                                <div class="ibox-content">
                                    <iframe src=""  id="menuIframe" width="100%"  frameborder="0"></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 全局js -->
        <script src="resource/admin/js/jquery.min.js?v=2.1.4"></script>
        <script src="resource/admin/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="resource/admin/js/plugins/layer/layer.min.js"></script>

        <!-- 自定义js -->
        <script src="resource/admin/js/content.js?v=1.0.0"></script>

        <!-- jsTree plugin javascript -->
        <script src="resource/admin/js/plugins/jsTree/jstree.min.js"></script>
        <style>
            .jstree-default .jstree-icon.none {
                width: 0;
            }
        </style>
        <script type="text/javascript">
            $(function () {
            	//发送加载树的Ajax请求
            	$.get("sys/menu/tree",function(data){
            		//加载树
                    $("#menu-tree").jstree({
                        //完成加载完毕就展开全部节点
                        'plugins': ["state"],
                        'state': {
                            "opened":true
                        },
                        // 配置节点信息
                        "core":{
                            "multiple" : false,

                            "data":data
                        }
                    });
            	},"json")
            	
            	
                $("#menu-add-btn").click(function () {
                   //1.获取选中的节点
                    var menuTree = $('#menu-tree').jstree(true);
                    var selectedNode = menuTree.get_selected();
                    if(selectedNode.length==0){
                        layer.msg("请选中一个节点进行操作!");
                        return false;
                    }

                    var node = menuTree.get_node(selectedNode[0]);
                    //2.获取当前节点的ID--作为父节点使用
                    var id = node.id;
                    //3.获取当前节点的类型(自定义类型)--在控制层通过该属性做判断
                    //A.root 根节点 B.parent C.child D.function
                    var nodeType = node.li_attr["node_type"];
                    //4.如果是子菜单,提示无法进行添加操作提示
                    if(nodeType=="child"){
                        layer.msg("该节点下无法继续添加子节点信息");
                        return false;
                    }

                    //5.设置添加节点的页面
                    var url = "sys/menu/add/"+id+"/"+node.text;

                    //6.跳转页面
                    $("#menuIframe").attr("src",url);


                });


                $("#menu-edit-btn").click(function () {
                    //1.获取选中的节点
                    var menuTree = $('#menu-tree').jstree(true);
                    var selectedNode = menuTree.get_selected();
                    if(selectedNode.length==0){
                        layer.msg("请选中一个节点进行操作!");
                        return false;
                    }

                    var node = menuTree.get_node(selectedNode[0]);
                    //2.获取当前节点的ID--作为父节点使用
                    var id = node.id;
                    if(id==-1){
                        layer.msg("根节点无法进行编辑操作!");
                        return false;
                    }

                    //3.获取当前节点的类型(自定义类型)--在控制层通过该属性做判断
                    //A.root 根节点 B.parent C.child D.function
                    var nodeType = node.li_attr["node_type"];
                    //4.如果是子菜单,需要有选择父节点的列表
                    //5.设置编辑节点的页面
                    var url = "sys/menu/update/"+id+"/"+nodeType;

                    //6.跳转页面
                    $("#menuIframe").attr("src",url);


                });
                $("#menu-remove-btn").click(function () {
                    //1.获取选中的节点
                    var menuTree = $('#menu-tree').jstree(true);
                    var selectedNode = menuTree.get_selected();
                    if(selectedNode.length==0){
                        layer.msg("请选中一个节点进行操作!");
                        return false;
                    }

                    var node = menuTree.get_node(selectedNode[0]);
                    //2.获取当前节点的ID--作为父节点使用
                    var id = node.id;
                    if(id==-1){
                        layer.msg("根节点无法进行删除操作!");
                        return false;
                    }
                    if(id<0){
                        layer.msg("该菜单已经是初始化数据，无法进行删除操作!");
                        return false;
                    }
                    //3.获取当前节点的类型(自定义类型)--在控制层通过该属性做判断
                    //A.root 根节点 B.parent C.child D.function
                    var nodeType = node.li_attr["node_type"];
                    //4.获取当前节点的子节点
                    var childNodes = menuTree.get_children_dom(node);
                    if(nodeType=="parent"&&childNodes.length>0){
                        layer.msg("该节点下存在子节点,无法进行删除操作");
                        return false;
                    }

                    //5.通过ajax完成删除操作
                    layer.confirm('您确定要彻底删除该菜单吗？', {
                        // skin: 'layui-layer-molv', //样式类名
                         btn: ['确定删除','取消'], //按钮
                         shade: 0.01, //显示遮罩
                         shift:6
                     }, function(){
                         //需要发送ajax请求
                         $.post("sys/menu/delete",{menu_id:id,type:nodeType,_method:"delete"},function (data) {
                             if(data.flag=="success"){
                                 window.location.reload();
                                 return false;
                             }else{
                                 layer.msg(data.message);
                                 return false;
                             }
                         },"json")
                     }, function(){});

                });


                $('#menu-tree').bind("activate_node.jstree", function (obj, e) {
                    $("#menuIframe").attr("src","");
                    // 处理代码
                    // 获取当前节点
                    //var currentNode = e.node;

                    // console.log(currentNode)
                    // console.log(currentNode.li_attr.id)
                    // console.log(currentNode.li_attr["node_type"])
                });
            })

        </script>

        <script type="text/javascript">
            window.onload=window.onresize=function(){
                console.log($(document).height())
                $("#menuIframe").height($(document).height()-198);
            }

        </script>
    </body>
</html>